<template>
    <div class="user-behavior-analysis">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>用户行为分析</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
        </template>
        <div class="chart-container">
          <div ref="chart" style="width: 100%; height: 400px;"></div>
        </div>
        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column prop="date" label="日期" sortable></el-table-column>
          <el-table-column prop="user" label="用户"></el-table-column>
          <el-table-column prop="action" label="行为"></el-table-column>
          <el-table-column prop="details" label="详情"></el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="1000"
          @current-change="handlePageChange"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  
  export default {
    name: 'UserBehaviorAnalysis',
    setup() {
      const chart = ref(null);
      const tableData = ref([
        { date: '2024-01-01', user: '***', action: '登录', details: '用户***在2024-01-01 10:00登录系统' },
        { date: '2024-01-02', user: '***', action: '浏览', details: '用户***在2024-01-02 11:00浏览首页' },
        // 更多数据...
      ]);
  
      onMounted(() => {
        const myChart = echarts.init(chart.value);
        const option = {
          title: {
            text: '用户行为分析'
          },
          tooltip: {},
          legend: {
            data: ['访问量', '登录次数', '购买次数']
          },
          xAxis: {
            data: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05", "2024-01-06"]
          },
          yAxis: {},
          series: [
            {
              name: '访问量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            },
            {
              name: '登录次数',
              type: 'bar',
              data: [15, 25, 28, 18, 12, 10]
            },
            {
              name: '购买次数',
              type: 'bar',
              data: [8, 12, 15, 10, 8, 11]
            }
          ]
        };
        myChart.setOption(option);
      });
  
      const handlePageChange = (currentPage) => {
        console.log('Current Page:', currentPage);
        // 处理分页逻辑，例如从后端获取新数据
      };
  
      return {
        chart,
        tableData,
        handlePageChange
      };
    }
  };
  </script>
  
  <style scoped>
  .user-behavior-analysis {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
    margin-left: 180px;
    background-color: rgba(183, 113, 171, 0.127)
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .chart-container {
    margin-bottom: 20px;
  }
  </style>
  